<template>
  <div class="theColorFooter">
    <div class="theColorFooterBox">
      <div class="footerTitle displayFlex">
        <div class="functionSelect">
          <P class="functionItem">我的投注记录
          <span @click="refreshEvent">
            <Icon type="refresh" class="refresh"></Icon>
          </span>
          </P>
        </div>
      </div>
      <div class="footerTable">
        <ul class="displayFlex">
          <li>彩种</li>
          <li>玩法</li>
          <li>期号</li>
          <li>投注号</li>
          <li>金额(元)</li>
          <li>中奖金额(元)</li>
          <li>状态</li>
          <li>操作</li>
        </ul>
        <ul class="displayFlex" v-for="inject in injectionData">
          <li>{{inject.lotteryName}}</li>
          <li>{{inject.playedGroupName}}</li>
          <li>{{inject.actionNo}}</li>
          <li><p :title="inject.actionData" class="one-txt-cut">{{inject.actionData}}</p></li>
          <li>{{inject.amount}}</li>
          <li>{{inject.bonus}}</li>
          <li :class="{'red': inject.statusText === '已派奖', 'green': inject.statusText === '未开奖'}">
            {{inject.statusText}}
          </li>
          <li>
            <p v-if="inject.statusText === '未开奖'" @click="cancelTheOrder(inject.orderId)"><a href="javascript:void(0)">撤单</a>
            </p>
            <p v-else>
              <router-link :to="{name: 'recordDetail',query:{orderId: inject.orderId,treeIndex: '2'}}">详情</router-link>
            </p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import "./main.scss"
  import Vue from 'vue';
  import {mapState, mapActions} from 'vuex';

  export default {
    data() {
      return {
        tableTitleData: [],
        perPageNum: '16',
        currentPage: '1',
        injectionData: [],
        whetherToSeal: false, //是否封盘
      }
    },
    computed: {
      ...mapState({
        bottomPourData: state => state.mutations.bottomPourData,
      }),
    },
    activated() {
      this.initData();
    },
    mounted() {

    },
    methods: {
      initData() {
        let that = this;
        let startTime = that._Util.currentDateYear(0);
        let params = {
          pageSize: that.perPageNum,
          pageNum: that.currentPage,
          status:'',
          lotteryCode:'',
          startStr: startTime,
          endStr: startTime,
        };
        that._Util.post(that, that._Api.POST_LOTTERY_BTEEING_DATA, params, (data) => {
          that.injectionData = data.result;
        });
      },
      //撤单
      cancelTheOrder(oder) {
        let that = this;
        if (that.whetherToSeal) {
          that._Util.showAlert('已封盘');
          return;
        }
        let params = {
          orderId: oder
        };
        that._Util.post(that, that._Api.POST_CANCER_ORDER_DATA, params, (data, oldData) => {
          if (parseInt(oldData.code) === -1) {
            that._Util.showAlert(oldData.msg);
            return;
          }
          that._Util.showAlert('撤单成功');
          that.initData();
        }, '', 'post')
      },
      //刷新
      refreshEvent(){
        this.initData();
      }
    },
    components: {},
    watch: {
      'bottomPourData'() {
        if (this.bottomPourData) {
          this.whetherToSeal = true;
        } else {
          this.whetherToSeal = false;
        }
      }
    }
  }
</script>

<style lang="css" rel="styleheet/css">

</style>
